<template>
	<uni-table border stripe emptyText="暂无更多数据">
		<!-- 表头行 -->
		<uni-tr>
			<uni-th :width="item.width||'100'" align="center" v-for="(item, index) in props.header"
				:key="index">{{item.label}}</uni-th>
		</uni-tr>
		<!-- 表格数据行 -->
		<uni-tr v-for="(rows, rindex) in props.list" :key="rindex">
			<uni-td  align="center" v-for="(item, index) in props.header" :key="index">
				<text  @click="handleCell(rows,item)" v-if="item.type=='number'">
					{{rows[item.prop]?rows[item.prop]:0}}
				</text>
				<text  @click="handleCell(rows,item)" v-else-if="item.type=='text'">
					{{rows[item.prop]?rows[item.prop]:'暂无'}}
				</text>
				<text class="text-blue" @click.stop="handlePreviewImage(rows[item.prop])" v-else-if="item.type=='image'">
					{{rows[item.prop]?'预览':'暂无'}}
				</text>
				<button class="cu-btn sm bg-blue round" @click.stop="handleOperate(rows,item)" v-else-if="item.type=='button'">
					{{item.button}}
				</button>
				<text  @click="handleCell(rows,item)" v-else>
					{{rows[item.prop]}}
				</text>
			</uni-td>
		</uni-tr>
	</uni-table>
</template>

<script setup lang="ts">
	import uniTable from '@/uni_modules/uni-table/components/uni-table/uni-table.vue';
	import uniTr from '@/uni_modules/uni-table/components/uni-tr/uni-tr.vue';
	import uniTh from '@/uni_modules/uni-table/components/uni-th/uni-th.vue';
	import uniTd from '@/uni_modules/uni-table/components/uni-td/uni-td.vue';
	import { useSettingStore } from '@/stores/index';
	import { watch, computed, ref } from 'vue';
	const setting = useSettingStore();
	const emit = defineEmits(['action']);
	const props = defineProps({
		isCard: {
			type: [Boolean, String],
			default: false
		},
		placeholder: {
			type: String,
			default: '搜索图片、文章、视频'
		},
		list: {
			default: () => {
				return [{}];
			}
		},
		//表格格式
		header: {
			default: () => {
				return [{
					prop: 'name',
					label: '',
					width: '',
					type: 'text',
					button:''
				}];
			}
		}
	});
	const handleCell=(rows:any,item:any)=>{
		emit('action',rows,item)
	}
	const handleOperate=(rows:any,item:any)=>{
		emit('action',rows,item)
	}
	const handlePreviewImage = (e : any) => {
		// 预览图片
		uni.previewImage({
			urls: [e],
			longPressActions: {
				itemList: ['发送给朋友', '保存图片', '收藏'],
				success: function (data) {
					console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
				},
				fail: function (err) {
					console.log(err.errMsg);
				}
			}
		});
	};
</script>

<style scoped lang="scss">
	.cu-bar .search-form {
		line-height: 64rpx;
		height: 64rpx;
		font-size: 24rpx;
		color: #333333;
		flex: 1;
		display: flex;
		align-items: center;
		margin: 0 30rpx;
	}
</style>